<template>
  <div class="bookview">
    <div class="substance">
      <div class="substance-header">
        <div class="header-left">
          <img :src="banner.cover" alt="" />
        </div>
        <div class="header-right">
          <div class="header-right-top">
            <div class="header-right-top-left">{{ banner.title }}</div>
            <div class="header-right-top-right">
              <div class="text">{{ banner.readInfo }}</div>
              <div class="btn"><img @click="deleteBanner" src="../assets/no.png" alt="" /></div>
            </div>
          </div>

          <div class="header-right-bottom">
            <div class="wenzi">
              {{ banner.description }}
            </div>
          </div>
        </div>
      </div>
      <div class="book-shelf">
        <div class="book-shelf-box">
          <div class="book-shelf-item">
            <van-grid :column-num="3">
              <van-grid-item v-for="(value, index) in book" :key="index" @click="gotoBookLook(value.id)">
                <img :src="value.cover" />
                <div class="title">{{ value.title }}</div>
                <!-- <div class="title-chapter">190章</div> -->
              </van-grid-item>
            </van-grid>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bookview",
  data() {
    return {
      banner: {},
      book: [],
    };
  },
  created() {
    this.getBanner();
    this.bannerShelf();
  },
  methods:{
      getBanner() {
      this.axios({
        method: "get",
        url: "/shelf/banner.json",
      })
        .then((result) => {
          // console.log(result);
          this.banner = result.data.data.banners[0];
          // console.log(this.banner);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    bannerShelf() {
      this.axios({
        method: "get",
        url: "/shelf/info.json",
      })
        .then((res) => {
          // console.log(res);
          this.book = res.data.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteBanner() {

    },
    gotoBookLook(id) {
      // console.log(title);
      this.$router.push({name:"BookContent",params:{id:id}})
    }
  }
};
</script>

<style lang="less" scoped>
.substance-header {
  width: 345px;
  height: 80px;
  padding: 0px 10px;
  margin: 10px auto;
  border: 1px solid #ccc;
  .header-left {
    float: left;
    img {
      height: 60px;
      line-height: 80px;
      margin-top: 10px;
    }
  }
  .header-right {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    width: 290px;
    .header-right-top {
      display: flex;
      justify-content: space-between;
      .text {
        float: left;
        color: red;
      }
      .btn {
        float: left;
        margin-left: 5px;
      }
    }
    .header-right-bottom {
      .wenzi {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 20px;
        color: #ccc;
      }
    }
  }
}
.book-shelf-box {
  //   padding: 0px 10px;
  padding-bottom: 50px;
}
.van-grid-item__content--center {
  img {
    width: 80px;
  }
  .title {
    font-size: 12px;
  }
  .title-chapter {
    font-size: 12px;
    color: #ccc;
  }
}
/deep/.substance-header[data-v-369ccf30]{
  background-color: white;
}
</style>